<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>11_过滤器</title>
</head>

<body>
  <!--
1. 理解过滤器
  功能: 对要显示的数据进行特定格式化后再显示
  注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
  1). 定义过滤器
    Vue.filter(filterName, function(value[,arg1,arg2,...]){
      // 进行一定的数据处理
      return newValue
    })
  2). 使用过滤器
    <div>{{myData | filterName}}</div>
    <div>{{myData | filterName(arg)}}</div>
-->
  <!--需求: 对当前时间进行指定格式显示-->
  <div id="test">
    <h2>显示格式化的日期时间</h2>
    <!-- 
      使用过滤器：formattedTime过滤器函数 
      formattedTime过滤器函数 会对 前面数据time 进行格式化，函数的返回值就是最终要渲染的内容
    -->
    <p>{{time | formattedTime('YYYY-MM-DD')}}</p>
    <p>{{time | formattedTime('HH:mm:ss')}}</p>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script>
    /*
      专门用来处理时间的js库：
        moment 体积太大
        dayjs  体积更小
        date-fns 体积更小
    */
    new Vue({
      el: '#test',
      data: {
        time: Date.now()
      },
      // 过滤器：格式化文本的
      // 所有使用过滤器的地址，都可以使用计算属性取缔，而计算属性使用起来更加简单
      filters: {
        // formattedTime(time) {
        //   return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
        // }
        formattedTime(time, str) {
          return dayjs(time).format(str)
        }
      },
      // time数据直接展示不行，要做处理才能展示，用计算属性
      // 用只读的计算属性还是可读可写的？看需不需要操作/修改这个值，不需要就用只读的
      computed: {
        // 使用原生js格式化时间
        // formattedTime() {
        //   const date = new Date(this.time);
        //   const year = date.getFullYear()
        //   const month = date.getMonth() + 1
        //   const day = date.getDate()
        //   const hours = date.getHours()
        //   const minutes = date.getMinutes()
        //   const seconds = date.getSeconds()

        //   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
        // }

        // 使用dayjs格式化时间
        // formattedTime() {
        //   return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        // }
      }
    })
  </script>
</body>

</html>